<template>
  <transition name='fade'>
   <div class='welcome'>
      <div class='logo'>
        <a href="http://www.mmvtc.cn/templet/default/index.jsp" title='去学校官网逛逛吧' class='pic-wrap'>
          <img src="./logo.png" alt="茂职院" />
        </a>
      </div>
      <div class='btn-wrap'>
        <Button type='info' @click='toUser'>开启旅程</Button>
        <Button type='info' @click='toSearch'>查询入口</Button>
      </div>
   </div>
  </transition>
</template>

<script>
  import Scroll     from 'base/scroll/scroll'
  import GoTop      from 'base/gotop'
  import {ERR_OK}   from 'api/config'
  import axios      from 'axios'
  import $          from 'jquery'


  export default {
    props: {

    },
    data() {
      return {
      }
    },
    created() {
      
    },
    components: {
      Scroll,
      GoTop
    },
    computed: {

    },
    methods: {
      toUser() {
        this.$router.push('/home/user')
      },
      toSearch() {
        this.$router.push('/home/search')
      },
      getCategory() {
        this.HttpService.getMenu().then(data => {
          this.nav = data.items
        })
      },
      getRecommend() {
        this.HttpService.getIndex().then(data => {
          // this.recommends = data.recommends[1]
          let d = data.data
          if(!data.stats) {
            this.recommends.push(d.recommends[1])
            this.ranHots.push(d.recommends[3])
            this.banners                  = d.banners
            this.yourLikes[0]['sub']      = d.yourLikes
          }
        })
      },
      getYourLikes() {
        this.loading            = !0
        setTimeout(() => {
          this.HttpService.getYourLikes().then(data => {
            this.loading          = !1
            this.yourLikes[0]['sub']      = data
          })
        }, 500)
      },
      handleClick(tab, event) {
        
      },
      toLists(item) {
        this.$store.commit('setMenuId', item.guide)
        this.$router.push('/home/lists?status=0&cat_id=' + item.guide)
      },
      toDetail(item) {
        this.$store.commit('setBookItem', item)
        this.$router.push('/home/detail?id=' + item.id)
      },
      clickLeft() {
        alert('点击左边')
      }
    },
    watch: {

    }
  }



</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"
  
  ::-webkit-scrollbar
    width: 0

  i,em
    font-style: normal
   
  .section
    border-bottom: 2px solid $mc  
  .s-title
    position: relative
    margin: 15px 0
    line-height: 24px
    font-size: 16px
    .replace
      position: absolute
      right: 4px
      top: 0
      font-size: 12px
      color: $mc
  .welcome
    .btn-wrap
      wh(60%, 40px)
      tbCenter()
      top: 70%
      width: 100%
      text-align: center
      button
        width: 130px
        height: 36px
        margin: 0 10px
        font-size: 14px
  .logo
    position: relative
    width: 80%
    margin: 200px auto 0
    &:after
      content: ''
      display: block
      position: absolute
      botton: -10px
      left: 50%
      width: 80%
      margin-left: -40%
      box-shadow: 3px 3px 10px 2px rgba(255,80,180, .8)
     &:before
       content: ''
       display: block
       position: absolute
       right: 25%;
       top: 28px;
       width: 0px
       height: 80px
       box-shadow: 0 0 10px 2px rgba(255,80,180, .8)
  .menu
    display: flex
    flex-wrap: wrap
    padding: 15px 10px 0
    align-items: center
    border-bottom: 1px solid #eee
    .menu-item
      width: 20%
      margin-bottom: 14px
      text-align: center
    .menu-img
      display: block
      width: 46px
      height: 46px  
      margin: 0 auto  
  .recommend
    text-align: center
    border-bottom: 2px solid $vc
    font-size: 14px
    .title
      padding: 10px 0
    i
      display: inline-block
      padding: 2px 5px
      margin-right: 5px
      background-color: red
      color: #fff
      font-size: 12px
      border-radius: 4px
      letter-spacing: 1px
  .section-con
    padding: 10px
    .recommend-item
      display: flex
      margin-bottom: 15px
      .pic-wrap
        width: 110px
        font-size: 0
        border: 1px solid $mc
        img
          width: 100%
      .info
        flex: 1
        margin-left: 15px 
        color: #999
        .title
          color: #222
          font-size: 15px
        .tag
          margin-top: 17px
        .desc
          height: 54px
          line-height: 18px
          margin-top: 35px
          overflow: hidden    
    .list
      position: relative
      padding: 10px 0
      font-size: 0
      .hot-item
        display: inline-block
        width: 30%
        margin-bottom: 12px
        .pic-wrap
          width: 100%
          img
            width: 100%
            height: 140px
        .info
          font-size: 14px
          margin-top: 6px
          text-align: center
          .title
            hh(22px)
            no-wrap()
        &:nth-child(3n + 1)
          margin-right: 5%
        &:nth-child(3n)
          margin-left: 5%
    .enter
      box-sizing: border-box;
      padding-top: 10px;
      font-size: 14px;
      text-align: center;
      border-top: 1px solid #eee
      color: $mc

  .move-enter-active, .move-leave-active
    transition: 0.4s ease
  .move-enter
    transform: translate3d(100%, 0, 0)
  .move-leave
    transform: translate3d(0, 0, 0)       
</style>